<script setup>
import { ElMessage } from "element-plus";
import request from "../utils/request.js";
import { ref } from 'vue'

//发送文本内容
const text = ref('')
const disabled = ref('true')
const props = defineProps(['id'])

//将记录对话保存到localStorage
const storage = (s, f) => {
    localStorage.setItem(s, JSON.stringify(f.value))
}

const check = ref(JSON.parse(localStorage.getItem('len'+props.id))) //已经打印过的长度
const items = ref(JSON.parse(localStorage.getItem('msg'+props.id)))

//t毫秒后执行流文本函数
//idx代表第几个框，同时代表该标签的id
//关于items数组
//这是个每行为 [身份(0为roboot，1为human)，str(框中的文本)] 的二维数组
const delay_printer = (t, idx) => {
    setTimeout(() => {
        let words = items.value[idx][1];
        printer(words, idx);
    }, t);
}

//文本流
const printer = (content, idx) => {
    let text = content;
    let outputElement = document.getElementById(idx);
    if (items.value[idx][0] == 0) {
        outputElement.style.background = "#f89898"
    } else {
        outputElement.style.background = "#eebe77"
    }
    let index = 0;
    function typeWriter() {
        outputElement.innerHTML = text.slice(0, index);
        index++;
        if (index <= text.length) {
            setTimeout(typeWriter, 30); // 每个字符之间的延迟时间
        } else {
            if (idx > 0) {
                check.value++
            }
            storage('len'+props.id, check)
        }
    }
    typeWriter()
}

if (check.value == null) {
    check.value = 1
}

//消息队列
if (items.value == null) {
    items.value = []
    items.value.push([0, '你好! 有什么可以帮助你的吗?'])
    storage('len'+props.id, check)
    delay_printer(300, 0)
    storage('msg'+props.id, items)
}

//消息发送
const sendMessage = async () => {
    if (text.value == "") {
        ElMessage.error('不可以发送空消息')
    } else {
        disabled.value = true
        request.get("/pythonScriptExecutor/getAns.do", {
            params: {
                disease: text.value,
            }
        }).then(
            res => {
                let arr = "与该疾病相关联的微生物有：\n"
                for (let i = 0; i < res.length; i++) {
                    arr += "\t" + res[i][1] + "\n"
                }
                res = arr
                items.value.push([1, text.value])
                delay_printer(600, items.value.length-1)
                items.value.push([0, res])
                delay_printer(1000, items.value.length-1)
                text.value = ""
                storage('msg'+props.id, items)
            });
        disabled.value = false
    }
}
</script>

<template>
    <el-scrollbar ref="scrollbarRef" height="350px" max-height="350px">
        <div v-for="([id, item], index) in items" class="scrollbar-demo-item-outer">
            <p v-if="id == 0 && index < check" :id="index" class="robot scrollbar-demo-item">{{ item }}</p>
            <p v-if="id == 0 && index >= check" :id="index" class="robot scrollbar-demo-item" 
                style="background: transparent;"></p>
            <p v-if="id == 1 && index < check" :id="index" class="human scrollbar-demo-item">{{ item }}</p>
            <p v-if="id == 1 && index >= check" :id="index" class="human scrollbar-demo-item" 
                style="background: transparent;"></p>
        </div>
    </el-scrollbar>
    <div class="input">
        <el-input v-model="text" maxlength="25" placeholder="Please input" :disabled="disabled.value" show-word-limit
            type="text" style="width: 70%; margin-right: 5px;" @keyup.native.enter="sendMessage"/>
        <el-button type="success" @click="sendMessage" :disabled="disabled.value">
            Send<el-icon class="el-icon--right">
                <Upload />
            </el-icon>
        </el-button>
    </div>
</template>

<style>
.input {
    position: absolute;
    bottom: 0px;
    height: 50px;
    width: 100%;
    border-radius: 0 0 50px 0;
    left: 0;
}

.dialogue {
    width: 98%;
    margin: 8px auto;
    height: 350px;
    background-color: #9fc19f;
}

.robot {
    background: #f89898;
}

.human {
    background: #eebe77;
}

.scrollbar-demo-item {
    text-align: left;
    margin: 10px;
    padding: 5px;
    border-radius: 4px;
    color: #FFFFFF;
    white-space: pre
}

.scrollbar-demo-item-outer {
    display: flex;
}
</style>